<!--
 * 列穿梭框,用于选择要显示的列
-->
<script>
export default {
  name: "cellTransfer",
  data() {
    return {
      cellTransferDialogVisible: false,

      cellOptions: [
        {label: '区域', prop: 'region'},
        {label: '凹陷', prop: 'dent'},
        {label: '井号', prop: 'wellName'},
        {label: '井别', prop: 'wellType'},
      ],
      cellSelected:[],
      selectedData: [], //选择的全部信息
    }
  },
  methods: {
    showCellTransferDialog(val) {
      console.log(val,'传递到弹窗的选中列');
      // 把现在显示的列传递到弹窗避免重复选择
      if(val.length > 0) {
        this.cellSelected = val.map(item => item.prop)
      }
      this.cellTransferDialogVisible = true
    },
    handleTransferChange(newValue) {
      console.log(newValue);
      // 根据prop值获取对应的label
      this.selectedData = newValue.map(prop => {
        const option = this.cellOptions.find(item => item.prop === prop);
        return {
          prop: option.prop,
          label: option.label
        };
      });
    },
    submit() {
      console.log(this.selectedData);
      // 假设你要将数据传递给父组件
      this.$emit('update:selectedColumns', this.selectedData);
      this.cellTransferDialogVisible = false
      // this.cellSelected = []
      // this.selectedData = []
    }
  }
};
</script>

<template>
  <div>
    <el-dialog title="列显示选项" :visible.sync="cellTransferDialogVisible" width="40%" :close-on-click-modal="false">
      <div>
        <el-transfer
          v-model="cellSelected"
          :titles="['可选列', '已选择列']"
          :filterable="true"
          :props="{ key: 'prop', label: 'label' }"
          @change="handleTransferChange"
          :data="cellOptions">
        </el-transfer>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cellTransferDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>

      </span>
    </el-dialog>



  </div>
</template>

<style scoped>

</style>
